<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-button type="success" style="margin-bottom: 10px;" @click="addDialogShow=true">添加</el-button>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-input v-model="condition.name" placeholder="请输入要搜索的名称" @input="selectByPage(1);"/>
          </el-form-item>
          <el-form-item style="float: right">
            <el-select
              v-model="condition.status"
              clearable
              placeholder="强选择是否上架"
              :value-on-clear="null"
              style="width: 200px;"
              @change="selectByPage(1)">
              <el-option label="上架" value="1"/>
              <el-option label="下架" value="0"/>
            </el-select>
          </el-form-item>
          <el-form-item style="float: right;">
              <el-select
              v-model="condition.parentId"
              clearable
              style="width: 200px;"
              placeholder="请选择父类"
              :value-on-clear="null"
              @change="selectByPage(1)">
              <el-option label="没有父分类" value="0"/>
              <el-option v-for="(parent,index) in allParent"
                         :key="index" :label="parent.name"
                         :value="parent.id"/>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table :data="pageInfo.list" border style="width: 100%">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="name" label="名称" />
          <el-table-column  label="图片">
            <template #default="scope">
              <el-avatar shape="square" :size="50" :src="SERVER_ADDR +'/category/pic/' +scope.row.pic" :title="SERVER_ADDR +'/category/pic/' +scope.row.pic"/>
            </template>
          </el-table-column>
          <el-table-column prop="dscp" label="描述" />
          <el-table-column label="父分类" >
          <template #default="scope">
            <el-text class="mx-1" type="primary" v-if="scope.row.parent">{{scope.row.parent.name}}</el-text>
            </template>
          </el-table-column>
        <el-table-column label="是否推荐" >
        <template #default="scope">
          <el-tag type="primary" v-if="scope.row.recom == 1">推荐</el-tag>
          <el-tag type="warning" v-if="scope.row.recom == 0">不推荐</el-tag>
        </template>
        </el-table-column>
          <el-table-column label="是否上架" >
            <template #default="scope">
              <el-tag type="primary" v-if="scope.row.status == 1">上架</el-tag>
              <el-tag type="primary" v-if="scope.row.status == 0">下架</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" type="primary" @click="selectById(scope.row.id)">修改</el-button>
              <el-popconfirm title="你确定要删除该车辆吗?" confirm-button-text="确认" cancel-button-text="取消" width="200px"
                             @confirm="deleteCategory(scope.row.id)">
                <template #reference>
                  <el-button size="small" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top: 20px;">
          <el-pagination background layout="prev, pager, next"
                         v-model:current-page="pageInfo.pageNum"
                         :page-count="pageInfo.pages"
                         @update:current-page="selectByPage" />
        </el-row>
      </el-card>
    </el-col>
  </el-row>


  <!-- 添加模态框开始 -->
  <el-dialog v-model="addDialogShow" title="添加分类" width="500px">
    <el-form>
    <el-form-item label="名称" label-width="20%">
      <el-input v-model="categoryAdd.name" placeholder="请输入名称" autocomplete="off" style="width: 300px"/>
    </el-form-item>
      <el-form-item label="描述" label-width="20%">
        <el-input v-model="categoryAdd.dscp" placeholder="请输入描述" autocomplete="off" />
      </el-form-item>
      <el-form-item label="父分类" label-width="20%">
        <el-select v-model="categoryAdd.parentId" placeholder="请选择父类" clearable :empty-values="[0]" :value-on-clear="0">
        <el-option v-for="(category,index) in allParent" :key="index" :label="category.name"
                   :value="category.id"/>
          </el-select>
      </el-form-item>
      <el-form-item label="是否推荐" label-width="20%">
      <el-radio-group v-model="categoryAdd.recom">
        <el-radio label="不推荐" :value="0" size="large"/>
        <el-radio label="推荐" :value="1" size="large"/>
      </el-radio-group>
      </el-form-item>
      <el-form-item label="是否上架" label-width="20%">
        <el-radio-group v-model="categoryAdd.status">
          <el-radio label="上架" :value="1" size="large"/>
          <el-radio label="下架" :value="0" size="large"/>
        </el-radio-group>
      </el-form-item>
    <el-form-item label="图片" label-width="20%">
      <el-upload class="avatar-uploader" :action=" SERVER_ADDR + '/category/upload'" name="pic" :headers="headers"
                 :show-file-list="false" :before-upload="beforepicUpload" :on-success="picAddUploadSuccess">
        <img v-if="categoryAdd.pic" :src="SERVER_ADDR + '/category/pic/' + categoryAdd.pic" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
    </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow = false">取消</el-button>
        <el-button type="primary" @click="insert"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加模态框结束 -->
  <!-- 修改的对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改分类" width="500px">
    <el-form>
      <el-form-item label="名称" label-width="20%">
        <el-input v-model="categoryUpdate.name" placeholder="请输入名称" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="描述" label-width="20%">
        <el-input v-model="categoryUpdate.dscp" placeholder="请输入描述" autocomplete="off" />
      </el-form-item>
      <el-form-item label="父分类" label-width="20%">
        <el-select v-model="categoryUpdate.parentId" placeholder="请选择父类" clearable :empty-values="[0]" :value-on-clear="0">
          <el-option v-for="(category,index) in allParent" :key="index" :label="category.name"
                     :value="category.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="是否推荐" label-width="20%">
        <el-radio-group v-model="categoryUpdate.recom">
          <el-radio label="不推荐" :value="0" size="large"/>
          <el-radio label="推荐" :value="1" size="large"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否上架" label-width="20%">
        <el-radio-group v-model="categoryUpdate.status">
          <el-radio label="上架" :value="1" size="large"/>
          <el-radio label="下架" :value="0" size="large"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图片" label-width="20%">
        <el-upload class="avatar-uploader" :action=" SERVER_ADDR + '/category/upload'" name="pic" :headers="headers"
                   :show-file-list="false" :before-upload="beforepicUpload" :on-success="picUpdateUploadSuccess">
          <img v-if="categoryUpdate.pic" :src="SERVER_ADDR + '/category/pic/' + categoryUpdate.pic" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow = false">取消</el-button>
        <el-button type="primary" @click="update"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改的模态框结束 -->
</template>

<script setup>
import categoryApi from "@/api/categoryApi.js";
import {computed, ref} from "vue";
import {ElMessage} from "element-plus";
import {useTokenStore} from "@/stores/token.js";
const  tokenStore=useTokenStore();
const headers =computed(()=>{
  const token = tokenStore.tokenStr;
  return{
    token
  }
});

const SERVER_ADDR=ref(import.meta.env.VITE_SERVER_ADDR);
const  condition= ref({
  name:null,
  parentId:null,
  status:null
});
//父分类
const allParent = ref([]);
//分页信息
const pageInfo = ref({
  pages:0,
  pageSize:0,
  pageNum:0
});
//被添加的信息
const categoryAdd =ref({
  name:null,
  dscp:null,
  pic:null,
  parentId:0,
  recom:1,
  status:1
});
//被修改的信息
const categoryUpdate =ref({
  id:'',
  name:'',
  dscp:null,
  pic:null,
  parentId:0,
  recom:1,
  status:1
});
//是否显示添加对话框
const addDialogShow=ref(false);
const updateDialogShow=ref(false);
//上传图片之前的回调
function beforepicUpload(rawFile){
  if(rawFile.type !== 'image/jpeg'){
    ElMessage.error('图片仅支持jpg格式');
    return false
  }else if(rawFile.size/ 1024 /1024 > 2){
    ElMessage.error("图片不能超过2M");
    return false
  }
  return true
}
//添加图片上传成功的回调
function picAddUploadSuccess(resp) {
  if(resp.code == 10000){
    ElMessage.success(resp.msg);
    categoryAdd.value.pic=resp.data;
  }else {
    ElMessage.error(resp.msg);
  }
}
//修改图片上传成功的回调
function picUpdateUploadSuccess(resp) {
  if(resp.code == 10000){
    ElMessage.success(resp.msg);
    categoryUpdate.value.pic=resp.data;
  }else {
    ElMessage.error(resp.msg);
  }
}
//获取值
function selectById(id){
  categoryApi.selectById(id)
      .then(resp=>{
        categoryUpdate.value=resp.data;
      })
  updateDialogShow.value=true;
}
//添加分类
function update(){
  categoryApi.update(categoryUpdate.value)
      .then(resp =>{
        if(resp.code == 10000){
          ElMessage.success(resp.msg);
          updateDialogShow.value=false;
          //查询第一页
          selectByPage(pageInfo.value.pageNum);
        }else{
          ElMessage.error(resp.msg);
        }
      });
}
//添加分类
function insert(){
  categoryApi.inster(categoryAdd.value)
      .then(resp =>{
        if(resp.code == 10000){
          ElMessage.success(resp.msg);
          addDialogShow.value=false;
          categoryAdd.value={
            name:null,
            dscp:null,
            pic:null,
            parentId:0,
            recom:1,
            status:1
          };
          //查询第一页
          selectByPage(1);
        }else{
          ElMessage.error(resp.msg);
        }
      });
}
//删除
function deleteCategory(id) {
  categoryApi.delete(id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          //查询第一页
          selectByPage(pageInfo.value.pageNum);
        } else {
          ElMessage.error(resp.msg);
        }
      })
}



//分页查询
function selectByPage(pageNum){
  categoryApi.selectByPage(condition.value,pageNum,10)
      .then(resp => {
        pageInfo.value=resp.data;
      })
}
//获取所有父类
function  selectAllParent(){
  categoryApi.selectAllParent()
      .then(resp=>{
        allParent.value=resp.data;
      })
}

selectAllParent();
selectByPage(1);
</script>
<style scoped>
.avatar-uploader,
.avatar{
  width: 170px;
  height: 170px;
  display: block;
  border: 1px dotted #dcdfe6;
  border-radius: 5px;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>